<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="../common/bootstrap/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="../common/bootstrap/table/css/bootstrap-table.min.css">
    <link type="text/css" rel="stylesheet" href="../common/validate/bootstrapValidator.css">
    <link type="text/css" rel="stylesheet" href="../common/toastr/toastr.min.css">
    <link rel="stylesheet" href="../common/css/common.css" />



    <script type="text/javascript" src="../common/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../common/bootstrap/bootstrap.min.js"></script>



    <style type="text/css">
        #topSlotCard{
            margin-left: 200px;
            width: 70%;
        }
        #tab1{
            height: 200px;
            width: 820px;
        }
        #tab1 td{
            width: 200px;
            height: 40px;
        }
    </style>

</head>
<body>

<div id="topSlotCard">
    <table id="tab">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">会员信息</h3>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员卡ID</span>
                            <input class="form-control" placeholder="会员卡ID"  name="serchCardId"
                                   id="serchCardId">
                        </div>
                    </div>
                    <button type="button" class="btn btn-danger" onclick="cardManage.search()">读卡</button>
                    <button type="button" class="btn btn-info" onclick="location.reload();">重置</button>
                    <button type="button" class="btn btn-primary" onclick="cardManage.show()">会员详情</button>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员ID  </span>
                            <input class="form-control" placeholder="" readonly="readonly" name="userId" id="userId">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员姓名  </span>
                            <input class="form-control" placeholder="" readonly="readonly" name="userName" id="userName">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员卡ID </span>
                            <input class="form-control" placeholder="" readonly="readonly" name="cardId" id="cardId">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员卡余额</span>
                            <input class="form-control" placeholder="" readonly="readonly" name="amout" id="amout">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员等级  </span>
                            <input class="form-control" placeholder="" readonly="readonly" name="cardLevel" id="cardLevel">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员积分  </span>
                            <input class="form-control" placeholder="" readonly="readonly" name="credit" id="credit">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </table>


    <div class="panel panel-success">
        <div class="panel-body">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#userShow" data-toggle="tab">会员基本资料</a></li>
                <li><a href="#orderShow"  data-toggle="tab">会员消费记录</a></li>
                <li><a href="#rechargeShow" data-toggle="tab">会员充值记录</a></li>
            </ul>
            <div id="mytab-content" class="tab-content">
                <div class="tab-pane fade in active" id="userShow">
                    <table id="tab1" class="table table-bordered">
                        <tr>
                            <td>
                                会员编号
                            </td>
                            <td id="userIdShow">

                            </td>
                            <td>
                                会员姓名
                            </td>
                            <td id="userNameShow">

                            </td>
                        </tr>
                        <tr>
                            <td>
                                会员手机号
                            </td>
                            <td id="phoneShow">

                            </td>
                            <td>
                                会员地址
                            </td>
                            <td id="adressShow">

                            </td>
                        </tr>
                        <tr>
                            <td>
                                会员身份证
                            </td>
                            <td id="idNoShow">

                            </td>
                            <td>
                                会员卡状态
                            </td>
                            <td id="statusShow">

                            </td>
                        </tr>

                        <tr>
                            <td>
                                会员卡Id
                            </td>
                            <td id="cardIdShow">

                            </td>

                            <td>
                                会员卡余额
                            </td>
                            <td id="amountShow">

                            </td>
                        </tr>
                        <tr>
                            <td>
                                性别
                            </td>
                            <td id="sexShow">

                            </td>
                            <td>
                                会员卡等级
                            </td>
                            <td id="cardLevelShow">

                            </td>
                        </tr>
                    </table>



                </div>
                <div class="tab-pane fade" id="orderShow">
                    <table class="table table-striped table-hover table-bordered" id="orderList">
                        <thead style="background-color: #BEDDFA">

                        </thead>
                    </table>
                </div>
                <div class="tab-pane fade" id="rechargeShow">
                    <table class="table table-striped table-hover table-bordered" id="rechargeList">
                        <thead style="background-color: #BEDDFA">

                        </thead>
                    </table>

                </div>
            </div>

        </div>
    </div>


</div>

</body>
</html>